﻿{extend name="public:base" /}

{block name='css'}
<link href="__ADMIN__/css/plugins/toastr/toastr.min.css" rel="stylesheet">
<link href="__ADMIN__/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

<!--内容样式-->
<link rel="stylesheet" href="/common/css/admin_index.css"/>
<link rel="stylesheet" href="/common/css/liMarquee.css"/>

<style>
  .scrollDiv {
    background: rgba(255, 255, 255, 0);
    height: 170px;
  }

  .scrollDiv:hover {
    background: rgba(255, 255, 255, 0);
  }

  #page-wrapper {
    padding: 0;
    position: relative !important;
    flex-shrink: 1;
    width: calc(100% - 220px);
  }

  .navbar-top-links li a {
    padding: 20px 31px 20px 10px;
    min-height: 50px;
  }

  .navbar-header {
    margin-left: 18px;
  }
</style>
{/block}

{block name="titleBox"}{/block}
{block name="content"}
<div class="main">
    <div class="head">
        <div class="logo"><img src="/common/images/img_logo.png"/></div>
        <div class="time">
            <div class="rq date"></div>
            <div class="rq week"></div>
            <div class="sj timeData"></div><!--此处时间需要动态显示-->
            <div class="divclear"></div>
        </div>
        <div class="divclear"></div>
    </div>

    <div class="nr-box b1">

        <div class="nb-title">
            <img src="/common/images/icon_syjc.png"/>
            <div class="nbt-bt">首页监测</div>
            <div class="nbt-yw">Home monitoring</div>
            <div class="nbt-zt">
                <div class="nbtz-yc"></div>
                <div class="nbtz-wz">异常</div>
            </div>
            <div class="nbt-zt">
                <div class="nbtz-zc"></div>
                <div class="nbtz-wz">正常</div>
            </div>
            <div class="divclear"></div>
        </div>

        <div class="nb-tj">
            <div class="nbt-l">当日监测次数</div>
            <div class="nbt-r index_all_check_count">0</div>
        </div>

        <div class="nb-tj">
            <div class="nbt-l">当日异常次数</div>
            <div class="nbt-r index_error_check_count" style="color: #ff3535;">0</div>
        </div>

        <div class="divclear"></div>

        <div class="nb-line" id="nb-line">
            <!-- 这里放首页监测图表 -->
        </div>

    </div>

    <div class="nr-box b2">

        <div class="nb-title">
            <img src="/common/images/icon_xwjc.png"/>
            <div class="nbt-bt">新闻监测</div>
            <div class="nbt-yw">News monitoring</div>
            <div class="nbt-zt">
                <div class="nbtz-yc"></div>
                <div class="nbtz-wz">异常</div>
            </div>
            <div class="nbt-zt">
                <div class="nbtz-zc"></div>
                <div class="nbtz-wz">正常</div>
            </div>
            <div class="divclear"></div>
        </div>

        <div class="nb-list fl">
            <div class="nbl-title">网页端</div>
            <div class="nbl-tj">
                <span class="web_all_news_count">共计：{$web_all_news_count}</span>
                <span class="web_today_news_count">日更新：{$web_today_news_count}</span>
                <span class="web_error_count">异常：{$web_error_count}</span>
            </div>
            <div class="nbl-lb scrollDiv">
                <ul class="web_news_list">
                    {volist name="web_news_list" id="vo"}
                    <li class="nbll-box">
                        <div class="nbllb-zt {$vo.status == 1 ? 'zc' : 'yc'}"></div>
                        {if $vo.status == 0}
                        <a href="{:url('newsDetail', ['id' => $vo.check_news_log_id])}" class="nbllb-bt">{$vo.title}</a>
                        {else /}
                        <div class="nbllb-bt">{$vo.title}</div>
                        {/if}
                        <div class="nbllb-sj">{$vo.format_publish_time}</div>
                        <div class="divclear"></div>
                    </li>
                    {/volist}
                </ul>
            </div>
        </div>

        <div class="nb-list fr">
            <div class="nbl-title">app端</div>
            <div class="nbl-tj">
                <span class="app_all_news_count">共计：{$app_all_news_count}</span>
                <span class="app_today_news_count">日更新：{$app_today_news_count}</span>
                <span class="app_error_count">异常：{$app_error_count}</span>
            </div>
            <div class="nbl-lb scrollDiv">
                <ul class="app_news_list">
                    {volist name="app_news_list" id="vo"}
                    <li class="nbll-box">
                        <div class="nbllb-zt {$vo.status == 1 ? 'zc' : 'yc'}"></div>
                        {if $vo.status == 0}
                        <a href="{:url('newsDetail', ['id' => $vo.check_news_log_id])}" class="nbllb-bt">{$vo.title}</a>
                        {else /}
                        <div class="nbllb-bt">{$vo.title}</div>
                        {/if}
                        <div class="nbllb-sj">{$vo.format_publish_time}</div>
                        <div class="divclear"></div>
                    </li>
                    {/volist}
                </ul>
            </div>
        </div>

        <div class="divclear"></div>
    </div>


    <div class="nr-box b3">

        <div class="nb-title">
            <img src="/common/images/icon_sypjc.png"/>
            <div class="nbt-bt">音视频监测</div>
            <div class="nbt-yw">Video and audio monitoring</div>
            <div class="divclear"></div>
        </div>

        <div class="nb-list fl">
            <div class="nbl-title">视频</div>
            <div class="nbl-tj">
                <span class="video_prev_time">上次监测时间：{$live_video_data.prev_check_date}</span>
                <span class="video_next_time">下次监测时间：{$live_video_data.next_check_date}</span>
            </div>
            <div class="nbl-lb">
                <ul class="video_li">
                    {volist name="live_video_data.list" id="vo"}
                    <li class="nbll-sp">
                        <span>{$vo.date}</span>
                        <span>总视频：{$vo.all_count}</span>
                        <span>异常：{$vo.error_count}</span>
                    </li>
                    {/volist}
                </ul>
            </div>
        </div>

        <div class="nb-list fr">
            <div class="nbl-title">音频</div>
            <div class="nbl-tj">
                <span class="music_prev_time">上次监测时间：{$live_music_data.prev_check_date}</span>
                <span class="music_next_time">下次监测时间：{$live_music_data.next_check_date}</span>
            </div>
            <div class="nbl-lb">
                <ul class="music_li">
                    {volist name="live_music_data.list" id="vo"}
                    <li class="nbll-sp">
                        <span>{$vo.date}</span>
                        <span>总音频：{$vo.all_count}</span>
                        <span>异常：{$vo.error_count}</span>
                    </li>
                    {/volist}
                </ul>
            </div>
        </div>

        <div class="divclear"></div>

    </div>


    <div class="nr-box b4">

        <div class="nb-title">
            <img src="/common/images/icon_ssyj.png"/>
            <div class="nbt-bt">实时预警</div>
            <div class="nbt-yw">Real time early warning</div>
            <div class="divclear"></div>
        </div>

        <div class="nb-tj">
            <div class="nbt-l">当日总预警</div>
            <div class="nbt-r today_all_siren_count">{$siren_data.all_error_count}</div>
        </div>

        <div class="nb-tj">
            <div class="nbt-l">当日未处理</div>
            <div class="nbt-r today_not_do_count" style="color: #ff3535;">{$siren_data.all_not_do_count}</div>
        </div>

        <div class="divclear"></div>

        <div class="nb-pie">
            <div id="container" style="height: 100%"></div>
            <div class="nbp-box sy">
                <div class="nbpb-bt" style="background: #ee6666;">首页</div>
                <div class="nbpb-sz">预警：<span class="today_siren_index_count">{$siren_data.index_count}</span>次<br>占比：<span class="today_siren_index_rate">{$siren_data.index_rate}</span>%
                </div>
            </div>
            <div class="nbp-box xw">
                <div class="nbpb-bt" style="background: #5470c6;">新闻</div>
                <div class="nbpb-sz">预警：<span class="today_siren_news_count">{$siren_data.news_count}</span>次<br>占比：<span class="today_siren_news_rate">{$siren_data.news_rate}</span>%
                </div>
            </div>
            <div class="nbp-box sp">
                <div class="nbpb-bt" style="background: #fac858;">视频</div>
                <div class="nbpb-sz">预警：<span class="today_siren_video_count">{$siren_data.video_count}</span>次<br>占比：<span class="today_siren_video_rate">{$siren_data.video_rate}</span>%
                </div>
            </div>
            <div class="nbp-box yp">
                <div class="nbpb-bt" style="background: #91cc75;">音频</div>
                <div class="nbpb-sz">预警：<span class="today_siren_music_count">{$siren_data.music_count}</span>次<br>占比：<span class="today_siren_music_rate">{$siren_data.music_rate}</span>%
                </div>
            </div>
        </div>

    </div>


</div>

{/block}

{block name="js"}
<script type="text/javascript" src="/common/js/jquery.liMarquee.js"></script>
<script type="text/javascript" src="/common/js/echarts-5.3.0/dist/echarts.js"></script>
<script type="text/javascript">
    $(function () {
        $('.scrollDiv').liMarquee({
            direction: 'up',
            scrollamount: 30,
            runshort: true
        });
    });

    renderDateAndWeek();

    function getWeek() {
        var date = new Date();
        //定义一个中文数组
        var arr = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
        return arr[date.getDay()];
    }

    function renderDateAndWeek() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth();
        var day = date.getDate();
        var week = getWeek();

        $('.date').html(addZero(year) + '.' + addZero(month) + '.' + addZero(day));
        $('.week').html(week);
    }

    setInterval(() => {
        renderTime();
    })

    function renderTime() {
        var date = new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        $('.timeData').html(addZero(hours) + ':' + addZero(minutes) + ':' + addZero(seconds));

        if(hours == 0 && minutes == 0 && seconds == 0) renderDateAndWeek();
    }

    function addZero(num) {
        if (parseInt(num) < 10) num = '0' + num
        return num
    }
</script>

<!--饼图-->
<script type="text/javascript">
    var dom = document.getElementById('container');
    var pieChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var siren_data = `{$siren_data_json}` ? JSON.parse(`{$siren_data_json}`) : []

    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: siren_data.news_count},
                    {value: siren_data.music_count},
                    {value: siren_data.video_count},
                    {value: siren_data.index_count}
                ]
            }
        ]
    };

    if (option && typeof option === 'object') {
        pieChart.setOption(option);
    }

    window.addEventListener('resize', pieChart.resize);
</script>

<!--折线图-->
<script type="text/javascript">
    var lineChart = echarts.init(document.getElementById('nb-line'));
    var option;
    var getCheckIndexData = `{:getCheckIndexData()}` ? JSON.parse(`{:getCheckIndexData()}`) : [];
    var indexAllCheckCount = getCheckIndexData.all_count;
    var indexErrorCheckCount = getCheckIndexData.error_count;
    var xData = getCheckIndexData.check_date_arr
    var yData = getCheckIndexData.status_arr;

    $('.index_all_check_count').html(indexAllCheckCount);
    $('.index_error_check_count').html(indexErrorCheckCount);

    option = {
        backgroundColor: 'rgba(255, 255, 255, 0)',
        xAxis: {
            type: 'category',
            data: xData,
            axisTick: {
                show: false
            },
            // 隐藏x轴内容
            axisLabel: {
                show: false,
            }
        },
        yAxis: {
            axisLabel: {
                formatter: function (value) {
                    var texts = [];
                    if (value == -1) {
                        texts.push('异常');
                    } else if (value == 1) {
                        texts.push('正常');
                    }
                    return texts;
                },
                textStyle: {
                    show: true,
                    color: "#fff",
                    fontSize: '18',
                }
            },
            splitLine: {
                show: false
            },
        },
        series: [
            {
                data: yData,
                type: 'line',
                showSymbol: true,
                symbol: 'circle', // 设定为实心点
                symbolSize: 20, // 设定实心点的大小
                itemStyle: {
                    normal: {
                        // 点的颜色
                        color: row => {
                            if (row.value == 1) {
                                return '#06E881';
                            } else {
                                return '#FF2929';
                            }
                        },
                        // 线的颜色
                        lineStyle: {
                            color: "#FFF",
                            width: 3,
                        },
                    }
                },
                label: {
                    show: true,
                    textStyle: {
                        color: "#fff",
                        fontSize: '16'
                    },
                    // 格式化每个这点的显示内容
                    formatter: function (row) {
                        if (row.value == 1) {
                            var arr = ['{top|' + xData[row.dataIndex] + '}'];
                        } else {
                            var arr = ['{bottom|' + xData[row.dataIndex] + '}'];
                        }
                        return arr.join('');
                    },
                    // 自定义样式
                    rich: {
                        top: {
                            color: '#fff',
                            fontSize: 16
                        },

                        bottom: {
                            padding: [0, 0, -80, 0],
                            color: '#fff',
                            fontSize: 16
                        }
                    }
                }
            }
        ]
    }

    if (option && typeof option === 'object') lineChart.setOption(option);
</script>

{/block}